<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="~{fragments/header :: header}">
</head>
<body>
<!-- Page Content -->
<div class="container blog-content-container">

    <div class="row">

        <!-- 左侧栏目 -->
        <div class="col-md-4 col-xl-3">

            <div class="row">
                <div class="col-md-12">
                    <span>
                      <a href="/u/waylau" th:href="'/u/' + ${user.username}" title="waylau" th:title="${user.username}" >
                        <img th:src="${user.avatar} == null ? '/images/avatar-defualt.jpg' : ${user.avatar} " 
                         class="blog-avatar-230">
                      </a>
                    </span>

                </div>

            </div>
            <div class="row">

                <div class="col-md-12">
                    <h2 class="card-text" th:text="${user.name}">老卫</h2>
                    <h4 class="card-text" th:text="${user.username}">waylau</h4>
                </div>
            </div>

           
            <div class="row ">
                <div class="col-md-12">
                    <h5><i class="fa fa-envelope-o" aria-hidden="true"></i>
                        <a href="mailto:waylau521@gmail.com" th:href="'mailto:'+ ${user.email}" th:text="${user.email}">waylau521@gmail.com</a></h5>
                </div>
            </div>
            
            <hr>

	      <!-- 分类 -->
	      <div id="catalogMain">
	      	   <div class="card my-4" id="catalogRepleace">
	            <h5 class="card-header"><i class="fa fa-bars" aria-hidden="true"></i> 分类 <a href="javascript:void(0)" th:if="${isCatalogsOwner}" class="blog-add-catalog blog-right" data-toggle="modal"
			data-target="#flipFlop" role="button"><i
			class="fa fa-plus" aria-hidden="true"></i></a></h5>
	
	            <ul class="list-group" th:each="catalog : ${catalogs}" th:object="${catalog}">
	            	<div class="blog-list-group-item">
	     	 
	     				
	            		<a href="javascript:void(0)" th:attr="catalogId=*{id}" class="blog-query-by-catalog">
	                    [[*{name}]]
	                	</a>
	      				<span class="blog-right">
	                		<a href="javascript:void(0)" th:if="${isCatalogsOwner}" class="blog-edit-catalog" data-toggle="modal"
								data-target="#flipFlop" role="button" th:attr="catalogId=*{id}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
	                		<a href="javascript:void(0)" th:if="${isCatalogsOwner}" class="blog-delete-catalog" th:attr="catalogId=*{id}"><i class="fa fa-times" aria-hidden="true"></i></a>
	            		</span>
	   
	            	</div>
 
 
	            </ul>
	        </div>
	      </div>

        </div>
        
   

        <!-- 右侧栏目 -->


        <div class="col-md-8 col-xl-9">
            <!-- 工具栏 -->
 
            <ul class="nav nav-tabs mr-auto">

                <li class="nav-item">
                    <a class="nav-link " data-th-classappend="${order} eq 'new' ? 'active' : ''" href="javascript:void(0)" th:attr="url='/u/'+${user.username}+'/blogs?order=new'">最新</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-th-classappend="${order} eq 'hot' ? 'active' : ''" href="javascript:void(0)" th:attr="url='/u/'+${user.username}+'/blogs?order=hot'">最热</a>
                </li>

                <form class="form-inline mt-2 mt-md-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="搜索" id="keyword" th:value="${keyword}">
                    <a href="javascript:void(0)" class="btn btn-outline-secondary my-2 my-sm-0" id="searchBlogs"><i class="fa fa-search"
                                                                                             aria-hidden="true"></i></a>
                </form>


            </ul>



            <!-- Blog Post -->
            <div id="mainContainer">
                <div id="mainContainerRepleace">
		            <div class="card mb-4" th:each="blog : ${blogList}">
		                <div class="card-block">
		                 	<h2 class="card-title">
		                        <a href="/u/waylau/blogs/1" class="card-link" title="waylau" 
		                        	th:href="'/u/' + ${blog.user.username} + '/blogs/'+ ${blog.id}"  th:title="${blog.user.username}" th:text="${blog.title}">
		                            OAuth 2.0 认证的原理与实践
		                        </a>
		                    </h2>
		                    <p class="card-text" th:text="${blog.summary}">使用 OAuth 2.0 认证的的好处是显然易见的。你只需要用同一个账号密码，就能在各个网站进行访问，而免去了在每个网站都进行注册的繁琐过程。 本文将介绍
		                        OAuth 2.0 的原理，并基于 Spring Security 和 GitHub 账号，来演示 OAuth 2.0 的认证的过程。</p>
		                    <div class="card-text">
		                        	发表于 [[${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm')}]] <i class="fa fa-eye" aria-hidden="true">[[${blog.readSize}]]</i>
		                        <i class="fa fa-heart-o" aria-hidden="true">[[${blog.voteSize}]]</i> <i class="fa fa-comment-o"
		                                                                              aria-hidden="true">[[${blog.commentSize}]]</i>
		                    </div>
		                </div>
		            </div>
	 
		            <div th:replace="~{fragments/page :: page}">...</div>
	            </div>
            </div>

        </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.container -->

<!-- The modal -->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog"
	aria-labelledby="modalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="modalLabel">新增/编辑</h4>
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>

			</div>
			<div class="modal-body" id="catalogFormContainer"></div>
			<div class="modal-footer">
				<button class="btn btn-primary" data-dismiss="modal" id="submitEditCatalog">提交</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<div th:replace="~{fragments/footer :: footer}">...</div>

<!-- JavaScript -->
<script th:inline="javascript">
var username = [[${user.username}]];
var catalogId = [[${catalogId}]];
</script>
<script src="../../js/userspace/u.js" th:src="@{/js/userspace/u.js}"></script>
</body>
</html>